<template>
	<view class="popup flex just-center align-center" @click="$emit('close')">
		<view class="box flex column align-center" @click.stop>
			<view class="title">发货</view>
			<view class="form">
				<template v-for="v in formList">
					<rowInputVue v-if="v.type == 'input'" :item="v" v-model="form[v.field]"></rowInputVue>
				</template>
			</view>
			<view class='btn' @click="submit">确认发货</view>
		</view>
	</view>
</template>

<script>
	import rowInputVue from "../form/rowInput.vue";

	import {
		ShopOrderSend
	} from '@/API/store.js'

	export default {
		components: {
			rowInputVue
		},
		props: {
			orderId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				formList: [{
					type: 'input',
					title: '快递公司名称',
					place: '请输入快递公司名称',
					maxlength: 100,
					require: true,
					field: 'express_name'
				}, {
					type: 'input',
					title: '快递单号',
					place: '请输入快递单号',
					maxlength: 100,
					require: true,
					field: 'express_no'
				}],
				form: {
					express_name: '',
					express_no: ''
				}
			}
		},
		methods: {
			setShow(bool = true) {
				this.show = bool
			},
			submit() {
				for (let i of this.formList) {
					if (i.require && !this.form[i.field]) {
						return this.$st.show(i.place)
					}
				}

				uni.showModal({
					title: '确认发货？',
					success: res => {
						if (res.confirm) {
							ShopOrderSend({
								order_id: this.orderId,
								...this.form
							}).then(res => {
								this.$st.show('发货成功')
								this.$emit('confirm')
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang='less' scoped>
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: rgba(0, 0, 0, .5);

		.box {
			width: 600rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				font-weight: bold;
				padding-bottom: 30rpx;
				width: 100%;
				text-align: center;
				border-bottom: 1px solid #aaa;
				font-size: 30rpx;
			}

			.form {
				padding: 30rpx 0 50rpx;
			}

			.btn {
				padding: 20rpx 80rpx;
				background: linear-gradient(90deg, #DD551B, #F49355);
				color: #FFFFFF;
				border-radius: 20rpx;
			}
		}
	}
</style>